<template>

<el-dialog
  title="修改配置"
  :visible.sync="dialogVisible"
   width="60%"
  :before-close="handleClose">

  <!-- ref对象引用 -->
     <div class="container">
         <div class="left-config">
           <el-form :model="formBean" label-width="100px">

               <!-- region字段 等于shanghai，beijing -->
               <!-- sectionType 选图片 值为1 -->
               <!-- 选项框  value不能为integer 最好是字符串 -->

               <!-- :action="process.env.BASE_URL + 'fileManager/upLoadFile'" -->
               <el-form-item label="视频地址" style="margin-top: 20px;">
                 <div class="row">
                   <el-input
                   style="width: 300px;"
                   v-model="formBean.videoUrl" placeholder="请输入..."></el-input>
                   <el-upload
                     class="upload-demo"
                     :action="uploadHost"
                     :on-remove="handleRemoveVideo"
                     :before-remove="beforeRemove"
                     multiple
                     :limit="1"
                     :on-exceed="handleExceed"
                     :file-list="fileList"
                     :on-success="handleSuccessVideo">
                     <el-button size="small" type="primary">点击上传</el-button>
                   </el-upload>
                 </div>
               </el-form-item>

               <el-form-item label="产品图地址" style="margin-top: 20px;">
                 <div class="row">
                   <el-input
                   style="width: 300px;"
                   v-model="formBean.productUrl" placeholder="请输入..."></el-input>
                   <el-upload
                     class="upload-demo"
                     :action="uploadHost"
                     :on-remove="handleRemoveProduct"
                     :before-remove="beforeRemove"
                     multiple
                     :limit="1"
                     :on-exceed="handleExceed"
                     :file-list="fileList"
                     :on-success="handleSuccessProduct">
                     <el-button size="small" type="primary">点击上传</el-button>
                   </el-upload>
                 </div>
               </el-form-item>

               <el-form-item label="背景图地址" style="margin-top: 20px;">
                 <div class="row">
                   <el-input
                   style="width: 300px;"
                   v-model="formBean.bgUrl" placeholder="请输入..."></el-input>
                   <el-upload
                     class="upload-demo"
                     :action="uploadHost"
                     :on-remove="handleRemoveBackground"
                     :before-remove="beforeRemove"
                     multiple
                     :limit="1"
                     :on-exceed="handleExceed"
                     :file-list="fileList"
                     :on-success="handleSuccessBackground">
                     <el-button size="small" type="primary">点击上传</el-button>
                   </el-upload>
                 </div>
               </el-form-item>



               <el-form-item label="标题" style="margin-top: 20px;">
                   <el-input v-model="formBean.title" placeholder="请输入标题"></el-input>
               </el-form-item>
               <el-form-item label="产品描述">
                   <el-input v-model="formBean.productDesc" placeholder="请输入产品描述" type="textarea"></el-input>
               </el-form-item>
               <el-form-item label="跳转地址">
                   <el-input v-model="formBean.btnLink" placeholder="请输入跳转地址" type="textarea"></el-input>
               </el-form-item>

           </el-form>

           <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="clickSubmit">确 定</el-button>
           </span>
         </div>
         <!-- <iframe
         width="100%"
         height="100%"
         src="https://dev.engineai.com.cn" class="right-webpc"></iframe> -->
     </div>

</el-dialog>

</template>

<script>
   import { updateSection } from '../../../../api/system/home_section'
   import { imageHost } from '@/api/ImageHost'
   import { uploadHost } from '@/api/UploadHost'

   export default{
     props: {
        // 可以定义更多 prop...
        form:{
            id:-1,
            videoUrl:'',
            productUrl:'',
            bgUrl:'',
            title:'',
            productDesc:'',
            btnLink:''
        }
      },

      data(){
        return{
            uploadHost:'',
            imageHost:'',
            dialogVisible:false,
            fileList:[],
            formBean:{
                // fileType:''
                id:-1,
                videoUrl:'',
                productUrl:'',
                bgUrl:'',
                title:'',
                productDesc:'',
                btnLink:''

            }

        }
      },
      created(){
          this.imageHost=imageHost();
          this.uploadHost = uploadHost()
      },
      watch:{
         //  form 属性
         form: {
              handler(newVal, oldVal) {
                   // formBean监听form属性的变化
                   this.formBean = JSON.parse(JSON.stringify(this.form))
              },
              deep: true,
              immediate: false
            }
      },

      methods:{
        showDialog(){
            this.dialogVisible = true
        },
        handleClose(){
            this.dialogVisible = false
        },

        handleRemoveVideo(file, fileList) {
            console.log(file, fileList);
            this.formBean.videoUrl='';
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleSuccessVideo(response, file, fileList){
            this.formBean.videoUrl='https://ai.itnewers.com/files/config/'+response.data;
        },
        handleRemoveProduct(file,fileList){
            console.log(file, fileList);
            this.formBean.productUrl='';
        },
        handleSuccessProduct(response, file, fileList){
            console.log('服务器响应:', response);
            // 将图片地址放入表单
            this.formBean.productUrl='https://ai.itnewers.com/files/config/'+response.data;
        },
        handleRemoveBackground(file,fileList){
            console.log(file, fileList);
            this.formBean.bgUrl='';
        },

        handleSuccessBackground(response, file, fileList){
            console.log('服务器响应:', response);
            // 将图片地址放入表单
            this.formBean.bgUrl='https://ai.itnewers.com/files/config/'+response.data;
        },
        handleChangeNumber(value){
            console.log(value);
            this.formBean.sort=value;

        },
        clickSubmit(){
            updateSection(this.formBean).then(response => {
              console.log(response);
              this.dialogVisible=false;
              // 给父组件发送事件
              this.$emit('custom-event');

            });

        }


      }
   }
</script>

<style scoped>

  .container{
    display: flex;
    flex-direction: row;
    /* height: 100%; */
    width: 100%;
  }

  .left-config{
    width: 35vw;
    /* height: 100vh; */
    display: flex;
    flex-direction: column;
  }




  .right-webpc{
    display: flex;
    width: 75vw;
    height: 100vh;
  }

    .line_video{
        display: flex;
        flex-direction: row;

    }
    .line_video_lable{
        width: 70px;
        height: 40px;
        /* background-color: aquamarine; */
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }
    .upload-demo{
        margin-left: 15px;

    }
    .line_video_margin{
        display: flex;
        flex-direction: row;
        margin-top: 20px;
    }

    .row{
      display: flex;
    }
</style>
